<template>
  <div>
    技术要点
    1.定制节点的样式
    2.curd节点关系，支持键盘快捷键操作
    3.序列化与反序列化
    4.对节点支持右键菜单
    5.拖拽生成节点

    <!-- 通过容器的宽高可以设置关联图的宽高 -->
    <div :style="{width: '800px',height:'800px'}">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions"></SeeksRelationGraph>
    </div>

  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
export default {
  components: { SeeksRelationGraph },
  mounted () {
    this.initGraph();
  },
  data () {
    return {
      graphOptions: {
        debug: true,
        'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
        'backgrounImageNoRepeat': true,
        'layouts': [
          {
            'label': '中心',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            'defaultJunctionPoint': 'border',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'from': 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            'min_per_width': '200',
            'max_per_width': '500',
            'min_per_height': '40',
            'max_per_height': '60',
            'levelDistance': '' // 如果此选项有值，则优先级高于上面那4个选项
          }
        ],
        'defaultLineMarker': {
          'markerWidth': 12,
          'markerHeight': 12,
          'refX': 6,
          'refY': 6,
          'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        "defaultExpandHolderPosition": "right",
        'defaultNodeShape': 1, //0圆形，1正方形，默认0
        'defaultNodeWidth': '0',
        'defaultLineShape': 4,
        'defaultJunctionPoint': 'lr',
        'defaultNodeBorderWidth': 0,
        'defaultLineColor': 'rgba(0, 186, 189, 1)',
        'defaultNodeColor': 'rgba(0, 206, 209, 1)'
      }
    }
  },
  methods: {
    initGraph () {
      var __graph_json_data = {
        'rootId': 'N1',
        'nodes': [{
          "id": "N1",
          "text": "侯亮平",
          "color": "#ec6941",
          "borderColor": "#ff875e",
          "borderWidth": 3,
          "data": {
            "isGoodMan": true,
            "sexType": "男"
          },
          "innerHTML": "<div class=\"my-node\" style=\"background-image: url(https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014);\"><div class=\"c-node-name2\" style=\"color:#ff875e\">侯亮平</div><div class='op'>我是操作</div></div>"
        },
        {
          "id": "N2",
          "text": "李达康",
          "color": "#ec6941",
          "borderColor": "#ff875e",
          "borderWidth": 3,
          "data": {
            "isGoodMan": true,
            "sexType": "男"
          },
          "innerHTML": "<div class=\"my-node\" style=\"background-image: url(https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062);\"><div class=\"c-node-name2\" style=\"color:#ff875e\">李达康</div></div>"
        },
        {
          "id": "N3",
          "text": "祁同伟",
          "color": "rgba(0, 206, 209, 1)",
          "borderColor": "#6cc0ff",
          "borderWidth": 3,
          "data": {
            "isGoodMan": false,
            "sexType": "男"
          },
          "innerHTML": "<div class=\"my-node\" style=\"background-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092);\"><div class=\"c-node-name2\" style=\"color:#6cc0ff\">祁同伟</div></div>"
        },
        {
          "id": "N4",
          "text": "陈岩石",
          "color": "#ec6941",
          "borderColor": "#ff875e",
          "borderWidth": 3,
          "data": {
            "isGoodMan": true,
            "sexType": "男"
          },
          "innerHTML": "<div class=\"my-node\" style=\"background-image: url(https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021);\"><div class=\"c-node-name2\" style=\"color:#ff875e\">陈岩石</div></div>"
        }],
        'links': [{
          "from": "N6",
          "to": "N1",
          "text": "师生",
          "color": "#d2c0a5",
          "fontColor": "#d2c0a5",
          "data": {
            "type": "师生"
          }
        },
        {
          "from": "N6",
          "to": "N3",
          "text": "师生",
          "color": "#d2c0a5",
          "fontColor": "#d2c0a5",
          "data": {
            "type": "师生"
          }
        },
        {
          "from": "N14",
          "to": "N6",
          "text": "上下级",
          "color": "#d2c0a5",
          "fontColor": "#d2c0a5",
          "data": {
            "type": "上下级"
          }
        }]
      }

      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
        setTimeout(() => {
          seeksRGGraph.graphSetting.layouter.stop()
        }, 1000)
      })
    }
  }

}
</script>

<style lang="less">
// 节点样式
.rel-node.rel-node-hover {
  .my-node {
    .op {
      display: block !important;
    }
  }
}
.rel-node {
  border: none !important;

  .my-node {
    border: none;
    background-position: center center;
    background-size: 100%;
    height: 74px;
    width: 74px;
    border-radius: 40px;
    .op {
      display: none;
      :hover {
        display: block;
      }
    }
  }
  .c-node-name2 {
    width: 160px;
    margin-left: -40px;
    text-align: center;
    margin-top: 85px;
    position: absolute;
  }
}
</style>